import { useState, useRef, DragEvent } from 'react';
import { Upload, FileText, Scan, PlusCircle } from 'lucide-react';

interface FileUploadAreaProps {
  onFileUpload: (files: FileList | null) => void;
}

export default function FileUploadArea({ onFileUpload }: FileUploadAreaProps) {
  const [isDragging, setIsDragging] = useState(false);
  const fileInputRef = useRef<HTMLInputElement>(null);
  
  const handleDragOver = (e: DragEvent<HTMLDivElement>) => {
    e.preventDefault();
    setIsDragging(true);
  };
  
  const handleDragLeave = () => {
    setIsDragging(false);
  };
  
  const handleDrop = (e: DragEvent<HTMLDivElement>) => {
    e.preventDefault();
    setIsDragging(false);
    
    if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
      onFileUpload(e.dataTransfer.files);
    }
  };
  
  const handleFileSelect = () => {
    fileInputRef.current?.click();
  };
  
  const handleFileInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (e.target.files && e.target.files.length > 0) {
      onFileUpload(e.target.files);
      // 重置input值，以便同一文件可以再次上传
      e.target.value = '';
    }
  };
  
  const handleScreenshot = () => {
    // 模拟截图功能
    alert('截图功能即将上线，敬请期待！');
  };
  
  return (
    <div className="flex-1 flex flex-col items-center justify-center p-8">
      <div className="text-center mb-8">
        <h2 className="text-xl font-semibold text-gray-800 mb-2">上传文件进行OCR识别</h2>
        <p className="text-gray-500">支持图片、PDF等格式，最多可同时上传10个文件</p>
      </div>
      
      <div 
        className={`border-2 border-dashed rounded-xl p-8 w-full max-w-md transition-colors ${
          isDragging ? 'border-blue-500 bg-blue-50' : 'border-gray-300 hover:border-blue-400'
        }`}
        onDragOver={handleDragOver}
        onDragLeave={handleDragLeave}
        onDrop={handleDrop}
        onClick={handleFileSelect}
      >
        <div className="text-center">
          <Upload className="w-12 h-12 mx-auto mb-4 text-gray-400" />
          <h3 className="text-lg font-medium text-gray-700 mb-1">拖放文件到此处</h3>
          <p className="text-gray-500 mb-4">或点击选择文件</p>
          <div className="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-700 transition">
            <PlusCircle className="w-4 h-4 mr-2" />
            选择文件
          </div>
          <p className="text-xs text-gray-400 mt-4">支持格式：JPG, PNG, PDF, TIFF, BMP</p>
        </div>
      </div>
      
      <div className="mt-8 w-full max-w-md">
        <div className="border-t border-gray-200 pt-6">
          <h3 className="text-sm font-medium text-gray-500 mb-4">其他上传方式</h3>
          <div className="grid grid-cols-2 gap-x-4 gap-y-3">
            <button 
              className="flex items-center justify-center p-3 border border-gray-200 rounded-lg hover:bg-gray-50 transition"
              onClick={handleScreenshot}
            >
              <Scan className="w-5 h-5 mr-2 text-gray-600" />
              <span className="text-sm text-gray-700">截图识别</span>
            </button>
            <button className="flex items-center justify-center p-3 border border-gray-200 rounded-lg hover:bg-gray-50 transition">
              <FileText className="w-5 h-5 mr-2 text-gray-600" />
              <span className="text-sm text-gray-700">批量导入</span>
            </button>
          </div>
        </div>
      </div>
      
      <input 
        type="file" 
        ref={fileInputRef} 
        className="hidden" 
        multiple 
        accept=".jpg,.jpeg,.png,.pdf,.tiff,.bmp"
        onChange={handleFileInputChange}
      />
    </div>
  );
}
